<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet"/>
    <link th:href="@{/css/loginAndregister.css}" rel="stylesheet"/>
    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/js/cookie.js}"></script>
</head>
<body>
<div class="Sing-in-form">
    <h1>登录</h1>
    <input type="hidden" th:value="${msg}" id="msg">
    <form class="layui-form" action="/loginJump" method="post">
        <input type="text" lay-verify="name" id="account" class="input-box" placeholder="账号" name="account" th:value="${account}">
        <input type="password" lay-verify="password|pass" class="input-box" placeholder="密码" name="password">
        <p><span><input type="checkbox" title="记住账号" id="remember"></span></p>
        <button type="submit" class="signin-btn" lay-submit="">登录</button>
        <hr>
        <p class="or">OR</p>
        <a href="/registerJump">
            <button id="signup" type="button" class="signup-btn" >注册</button>
        </a>
    </form>
</div>
</body>
<script>
<!--引入cookie模块-->
    layui.config({base: '/js/'}).extend({
        cookie: 'cookie'
    });

    //记住密码
    $(function () {
        if($.cookie('account')){
            $('#remember').prop("checked",true);
            $('#account').val($.cookie('account'));
        }else{
            $('#remember').prop("checked",false);
        }

    })

    layui.use(['form','jquery','cookie'],function () {
        var form = layui.form,
        $ = layui.jquery;

        //记住密码
        form.on('checkbox',function (data) {
            if(data.elem.checked){
                $.cookie('account',$('#account').val()
                    ,{
                        expires : 7,
                        path: '/'
                    });
            }
            else {
                $.cookie('account','',-1);
            }
        });

        form.verify({
            name: function (value) {
                if (value.length == 0) {
                    return '账号必须填写';
                }
            }
            , pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ]
            , password:function (value) {
                if(value.length == 0){
                    return '密码还未填写';
                }
            }
        });

        form.render("checkbox");
    })
</script>
</html>